<template>
  <!-- 徐妹 -->
  <div>
    <!-- 卡片试图区域 -->
    <el-card>
      <el-form :inline="true">
        <el-form-item label="学科名称">
          <el-input v-model="queryInfo.subjectName"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearInput">清除</el-button>
          <el-button type="primary" @click="getGoodsList">搜索</el-button>
        </el-form-item>
        <el-form-item class="add">
          <el-button type="success" icon="el-icon-edit" @click="addX">新增学科</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="'数据一共'+`${total}`+'条'" type="info">
      </el-alert>
      <!-- table表格区 -->
      <el-table :data="goodslist" style="width: 100%">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者">
        </el-table-column>
        <el-table-column prop="addDate" label="创建时间" width="200px">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <el-link v-if="scope.row.isFrontDisplay === 0">否</el-link>
            <el-link v-else-if="scope.row.isFrontDisplay === 1">是</el-link>
          </template>
        </el-table-column>

        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量">
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="router_mu(scope.row)">学科目标</el-link>
            <el-link type="primary" :underline="false" @click="router_mu1(scope.row)">学科标签</el-link>
            <el-link type="primary" :underline="false" @click="subForm(scope.row)">修改</el-link>
            <el-link type="primary" :underline="false" @click="remove(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新添学科弹框区域 -->
    <el-dialog title="添加学科" :visible.sync="dialogVisibleAdd" width="30%">
      <el-form :model="addForm" :rules="addRules" ref="ruleFormRef" label-width="100px" class="addClose">
        <el-form-item label="活动名称" prop="subjectName">
          <el-input v-model="addForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item v-model="addForm.isFrontDisplay" label="是否显示">
          <!--eslint-disable-next-line-->
          <template slot-scope="scope">
            <el-switch v-model="values" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改部分弹框区域 -->
    <el-dialog title="添加学科" :visible.sync="sunBdialogVisible" width="30%">
      <el-form :model="eddForm" :rules="addRules" ref="ruleFormRef" label-width="100px" class="eddClose">
        <el-form-item label="活动名称" prop="subjectName">
          <el-input v-model="eddForm.subjectName"></el-input>
        </el-form-item>
        <el-switch style="display: block" v-model="values" active-color="#13ce66" inactive-color="#ff4949"
          inactive-text="是否显示">
        </el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sunBdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page"
      :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.pagesize" layout="total,  prev, pager,next,sizes, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>

import { list, add, remove, update } from '../../api/hmmm/subjects.js'
export default {
  name: 'subjects',
  data () {
    return {

      // 开关按钮
      values: true,
      // 分页
      currentPage4: 10,
      // 获取用户列表参数对象
      queryInfo: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      // 数据列表
      goodslist: [],
      // 总条数
      total: 10,
      dialogVisibleAdd: false,

      addForm: {
        subjectName: ''
      },
      addRules: {
        subjectName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      sunBdialogVisible: false,
      eddForm: {
        isFrontDisplay: 1,
        id: '',
        subjectName: ''
      },
      value: '',
      many: '',
      routerList: {
        value: '',
        label: ''
      }

    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    addX () {
      this.dialogVisibleAdd = true
      this.$refs.ruleFormRef.resetFields()
    },
    // 确定修改
    async sureInfo (row) {
      row = await update(this.eddForm)
      this.$message.success('成功了')
      this.sunBdialogVisible = false
      this.getGoodsList()
    },

    // 获取需要修改数据
    subForm (row) {
      this.sunBdialogVisible = true
      console.log(row)
      this.eddForm.id = row.id
      this.eddForm.subjectName = row.subjectName
    },
    // 添加学科
    addList () {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (!valid) return
        if (this.values === true) {
          this.many = 1
        } else {
          this.many = 0
        }
        await add({
          subjectName: this.addForm.subjectName,
          isFrontDisplay: this.many
        })
        this.$message.success('成功了')
        this.dialogVisibleAdd = false
        this.getGoodsList()
      })
    },

    // 清空input框
    clearInput () {
      this.values = ''
      this.queryInfo.subjectName = ''
      // this.getGoodsList()
    },

    // 路由跳转
    router_mu (row) {
      this.$router.push({ path: '/subjects/directorys', query: { id: `${row.id}`, name: `${row.subjectName}` } })
    },
    router_mu1 (row) {
      this.$router.push({ path: '/subjects/tags', query: { id: `${row.id}`, name: `${row.subjectName}` } })
    },

    // 删除事件
    async remove (id) {
      const usernum = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (usernum !== 'confirm') { return this.$message.info('已取消') }
      // 删除逻辑
      try {
        if (this.goodslist.length === 1) {
          this.queryInfo.page = this.queryInfo.page === 1 ? 1 : this.queryInfo.page - 1
        }
        const { data: res } = await remove({
          id
        })
        console.log(res)
        this.$message.success('删除成功')
        this.getGoodsList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 分页效果
    handleSizeChange (size) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = size
      this.getGoodsList()
    },
    handleCurrentChange (page) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.page = page
      this.getGoodsList()
    },
    //  根据分页获取相应数据列表
    async getGoodsList () {
      const { data: res } = await list(this.queryInfo)
      this.goodslist = res.items
      // console.log(this.goodslist)
      this.total = res.counts
    }

  }

}

</script>

<style scoped lang='less'>
.add {
  float: right;
}
.el-pagination {
  float: right;
}
.el-link {
  padding-left: 10px;
}
.el-switch {
  padding-left: 30px;
}
</style>
